<template>
  <div>
    <div class="shopcart">
      <div class="content" @click="toggleDetail">
        <div class="content-left">
          <div class="logo-wrapper">
            <div class="logo" :class="{'highlight':totalCount>0}">
              <i class="icon-shopping_cart"></i>
            </div>
            <div class="num" v-show="totalCount>0">{{totalCount}}</div>
          </div>
          <div class="price" :class="{'highlight':totalCount>0}">¥{{totalPrice}}</div>
          <div class="desc">另需配送费{{deliveryPrice}}元</div>
        </div>
        <div class="content-right" :class="payClass" @click.stop.prevent="pay">{{payDesc}}</div>
      </div>
      <transition name="detail-fade">
        <div class="shopcart-detail" v-show="detailShow">
          <div class="detail-header">
            <h1 class="title">购物车</h1>
            <span class="empty" @click="empty">清空</span>
          </div>
          <div class="detail-content" ref="detailContent">
            <ul>
              <li v-for="(food, key) in selectGoods" :key="key" class="detail-item">
                <span class="name">{{food.name}}</span>
                <span class="price">{{food.price}}</span>
                <div class="shopcart-wrapper">
                  <cartcontrol :food="food"></cartcontrol>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </transition>
    </div>
    <transition name="mask-fade">
      <div class="detail-mask" @click="hideDetail" v-show="detailShow"></div>
    </transition>
  </div>
</template>

<script>
import BScroll from 'better-scroll';
import cartcontrol from 'components/cartcontrol/cartcontrol';

export default {
  props: {
    minPrice: {
      type: Number
    },
    deliveryPrice: {
      type: Number
    },
    selectGoods: {
      type: Array,
      default () {
        return [];
      }
    }
  },
  data () {
    return {
      fold: true
    };
  },
  computed: {
    totalPrice () {
      let total = 0;
      for (let i = 0; i < this.selectGoods.length; i++) {
        let good = this.selectGoods[i];
        total += good.price * good.count;
      };
      return total;
    },
    totalCount () {
      let count = 0;
      for (let i = 0; i < this.selectGoods.length; i++) {
        let good = this.selectGoods[i];
        count += good.count;
      };
      return count;
    },
    payDesc () {
      if (this.totalPrice === 0) {
        return `¥${this.minPrice}起送`;
      } else if (this.totalPrice < this.minPrice) {
        let diff = this.minPrice - this.totalPrice;
        return `还差¥${diff}起送`;
      } else {
        return '去结算';
      }
    },
    payClass () {
      if (this.totalPrice < this.minPrice) {
        return 'no-enough';
      } else {
        return 'enough';
      }
    },
    detailShow () {
      if (!this.totalCount) {
        return false;
      }
      let show = !this.fold;
      return show;
    }
  },
  watch: {
    detailShow (newVal, oldVal) {
      if (newVal) {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.detailContent, {
            click: true
          });
        } else {
          this.scroll.refresh();
        }
      }
    }
  },
  methods: {
    toggleDetail () {
      if (!this.totalCount) {
        return;
      }
      this.fold = !this.fold;
    },
    empty () {
      this.selectGoods.forEach((food) => {
        food.count = 0;
      });
      this.fold = true;
    },
    hideDetail () {
      this.fold = true;
    },
    pay () {
      window.alert('去支付');
    }
  },
  components: {
    cartcontrol
  }
};
</script>

<style lang="stylus" scoped="scoped">
@import '../../common/stylus/mixin'
@import '../../common/stylus/base'

  .shopcart
    position: fixed
    left: 0
    bottom: 0
    width: 100%
    height: 48px
    z-index: 50
    .content
      display: flex
      color: rgba(255, 255, 255, .4)
      // position: relative
      // z-index: 1000
      .content-left
        flex: 1
        background-color: #141d27
        .logo-wrapper
          display: inline-block
          position: relative
          top: -10px
          width: 56px
          height: 56px
          margin: 0 18px
          padding: 6px
          border-radius: 50%
          box-sizing: border-box
          background-color: #141d27
          .logo
            width: 100%
            height: 100%
            background-color: #2b343c
            border-radius: 50%
            text-align: center
            &.highlight
              background-color: rgb(0, 160, 220)
              .icon-shopping_cart
                color: #fff
            .icon-shopping_cart
              font-size: 24px
              line-height: 44px
              color: #80858a
          .num
            position: absolute
            top: 0
            // left: 32px
            right: 0
            padding: 0 6px
            height: 16px
            line-height: 16px
            font-size: 9px
            font-weight: 700
            border-radius: 16px
            text-align: center
            color: #fff
            background-color: rgb(240, 20, 20)
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .4)
        .price
          margin: 12px 0
          padding-right: 12px
          display: inline-block
          font-size: 16px
          font-weight: 700
          line-height: 24px
          vertical-align: top
          border-right: 1px solid rgba(255, 255, 255, .1)
          &.highlight
            color: #fff
        .desc
          display: inline-block
          padding-left: 12px
          font-size: 10px
          font-weight: 700
          line-height: 48px
          vertical-align: top
      .content-right
        flex: 0 0 105px
        width: 105px
        font-size: 12px
        height: 48px
        line-height: 48px
        font-weight: 700
        text-align: center
        &.no-enough
          background-color: #2b343c
        &.enough
          background: #00b43c
          color: #fff
    .shopcart-detail
      position: absolute
      left: 0
      bottom: 0px
      z-index: -1
      width: 100%
      padding-bottom: 48px
      box-sizing: border-box
      
      // transform: translate3d(0, 0, 0)
      &.detail-fade-enter-active, &.detail-fade-leave-active
        transition: all .3s
      &.detail-fade-enter, &.detail-fade-leave-to
        transform: translate3d(0, 100%, 0)
      .detail-header
        padding: 0 18px
        height: 40px
        line-height: 40px
        background-color: #f3f5f7
        border-bottom-1px(rgba(7, 17, 27, 0.1))
        font-size: 0
        .title
          display: inline-block
          font-size: 14px
          color: rgb(7, 17, 27)
        .empty
          display: inline-block
          font-size: 12px
          color: rgb(0, 160, 220)
          float: right
      .detail-content
        background-color: #fff
        padding: 0 18px
        max-height: 217px
        overflow: hidden
        font-size: 0
        .detail-item
          position: relative
          padding: 12px 0
          height: 24px
          border-bottom-1px(rgba(7, 17, 27, 0.1))
          .name
            display: inline-block
            font-size: 14px
            color: rgb(7, 17, 27)
            line-height: 24px
            // vertical-align: top
          .price
            // display: inline-block
            position: absolute
            right: 90px
            bottom: 12px
            font-size: 14px
            line-height: 24px
            font-weight: 700
            color: rgb(240, 20, 20)
            // vertical-align: top
          .shopcart-wrapper
            // display: inline-block
            position: absolute
            bottom: 6px
            right: 0
  .detail-mask
    position: fixed
    left: 0
    top: 0
    bottom: 0
    z-index: 10
    width: 100%
    background-color: rgba(7, 17, 27, .6)
    backdrop-filter: blur(10px)
    opacity: 1
    &.mask-fade-enter-active, &.mask-fade-leave-active
      transition: opacity .5s
    &.mask-fade-enter, &.mask-fade-leave-to
      opacity: 0
</style>
